<template>
  <div class="element">
     <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-container>
        <el-main>Main</el-main>
        <el-footer>Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>

    <el-x @click="Login"> 跨域请求 </el-x>
    <el-button @click="getLoginAction"> get请求 </el-button>
    <el-button @click="postLoginAction"> post请求 </el-button>
    <el-input />
    <el-button @click="data.show = !data.show">Click Me</el-button>
    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-fade-in-linear">
        <div v-show="data.show" class="transition-box">.el-fade-in-linear</div>
      </transition>
      <transition name="el-fade-in">
        <div v-show="data.show" class="transition-box">.el-fade-in</div>
      </transition>
    </div>
    <el-row >
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
        <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        </el-row>
        <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        </el-row>
        <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-button type="primary">
        <el-icon style="vertical-align: middle;">
            <search />
        </el-icon>
        <span style="vertical-align: middle;"> 搜索 </span>
    </el-button>
    <el-icon  :size="30" color="#409EFC">
        <bicycle />
    </el-icon>
  </div>
</template>
<script>
import { defineComponent,onMounted, reactive } from 'vue'
 import { Edit ,Search,Bicycle} from '@element-plus/icons'
import axios from 'axios'
import { getLogin ,postLogin} from '../api/api';
export default defineComponent({
    components: {
        // 全名
        // [Edit.name]: Edit,
        // 或者以缩写的方式,
        Edit,
        Search,
        Bicycle
    },
    setup() {
        let data = reactive({
            show:true
        })
        onMounted(()=>{
            // 组件挂载的过程
            // 数据dom...
            // 发请求
            // 数据初始化的操作 接受路ja'q由传递的参数
        })
        const Login=()=>{
            axios.get('/api/training/login?userNum=admin&password=admin')
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
           });

          axios.get('https://api.github.com/users')
              .then(function (response) {
                console.log(response);
              })
              .catch(function (error) {
                console.log(error);
              });
        }
        const getLoginAction = async () =>{
              const res = await getLogin()
              console.log(res);
        }
        const postLoginAction = async () =>{
              const res = await postLogin({useNum:'admin',password:'admin'})
              console.log(res);
        }
        return{
        data,
        Login,
        getLoginAction,
        postLoginAction
        }
    },
})
</script>
<style scoped lang="scss">
// 隐藏显示过渡动画
  .transition-box {
    margin-bottom: 10px;
    width: 200px;
    height: 100px;
    border-radius: 4px;
    background-color: #409eff;
    text-align: center;
    color: #fff;
    padding: 40px 20px;
    box-sizing: border-box;
    margin-right: 20px;
  }
//   flex布局
   .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .el-col {
        border-radius: 4px;
    }
    .bg-purple-dark {
        background: #99a9bf;
    }
    .bg-purple {
        background: #d3dce6;
    }
    .bg-purple-light {
        background: #e5e9f2;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }
      .el-header,
  .el-footer {
    background-color: #b3c0d1;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #d3dce6;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #e9eef3;
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 160px;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }

  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>